<script setup lang="ts">
import { getHomeBannerAPI, getCategoryMutliAPI, getHotMutliAPI } from '@/services/home'
import CustomNavbar from './components/CustomNavbar.vue' // 8.4 引入[自定义导航栏]进行测试
import CategoryPanel from './components/CategoryPanel.vue' // 11.end 引入[前台分类]组件
import HotPanel from './components/HotPanel.vue' // 13.end同步
import XtxSwiper from '@/components/XtxSwiper.vue' // 9.4 引入轮播图组件
import XtxGuess from '@/components/XtxGuess.vue' // 15.end 引入猜你喜欢组件
import type { BannerItem, CategoryItem, HotItem } from '@/types/home' // 10.6
import type { XtxGuessInstance } from '@/types/component' // 18.5
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'
import PageSkeleton from './components/PageSkeleton.vue' // 21.6 导入自动生成的<骨架屏>代码

// 10.2(测试) 获取[主页]轮播图数据:
// 细节7:(eslint) async后边需加空格 ->Insert `·`
const bannerList = ref<BannerItem[]>([]) // 10.2同步 ->细节9: TS中不指定类型的话, 这里就一直只能是 '空数组'...
const getHomeBannerData = async () => {
  const res = await getHomeBannerAPI()
  bannerList.value = res.result // 10.6
}

const categoryList = ref<CategoryItem[]>([]) // 12.3
// 12.2 获取[前台分类]数据:
const getHomeCategoryData = async () => {
  const res = await getCategoryMutliAPI()
  categoryList.value = res.result // 12.6
}

// 14.2 获取[首页推荐]数据:
const hotList = ref<HotItem[]>([]) // 14.3 ->细节12: 关于定义变量接收接口数据, 最好是写到接口调用上边, 这是一个规范！！！
const getHomeHotData = async () => {
  const res = await getHotMutliAPI()
  hotList.value = res.result // 14.6
}

// 21.8 是否加载中的标记:
const isLoading = ref(false)

// 10.3 页面加载, 默认调用获取数据:
// 细节8: 项目是基于[uni-app]进行的, 用的是其内部带有的声明生命周期！！！
onLoad(async () => {
  isLoading.value = true
  await Promise.all([getHomeBannerData(), getHomeCategoryData(), getHomeHotData()])
  isLoading.value = false // 21.end
})

// 18.3 获取猜你喜欢组件实例:
const guessRef = ref<XtxGuessInstance>()
// 18.2 滚动触底触发的事件:
const onScrolltolower = () => {
  // console.log('已经顶到底啦♥...!')

  // 18.7
  guessRef.value?.getMore()
}

// 20.1 触发自定义下拉刷新:
const isTriggered = ref(false) // 20.2
const onRefresherrefresh = async () => {
  isTriggered.value = true // 20.3 开启下拉刷新效果
  // 20.4 加载数据
  // await getHomeBannerData()
  // await getHomeCategoryData()
  // await getHomeHotData()

  guessRef.value?.resetData() // 20.end 先重置[猜你喜欢], 再去调用"获取"到初始列表数据...
  // ✨✨20.5(性能优化) 接口并行加载: ---这个方法是要等所有都为 true, 才会执行后边代码！！！
  await Promise.all([
    getHomeBannerData(),
    getHomeCategoryData(),
    getHomeHotData(),
    guessRef.value?.getMore(),
  ])

  isTriggered.value = false // 20.6 关闭下拉刷新效果
}
</script>

<template>
  <CustomNavbar /><!-- 8.4同步 -->
  <!-- 18. 滚动容器 --><!-- 20. 开启自定义下拉刷新/ 下拉刷新被触发 -->
  <scroll-view
    refresher-enabled
    @refresherrefresh="onRefresherrefresh"
    @scrolltolower="onScrolltolower"
    :refresher-triggered="isTriggered"
    class="scroll-view"
    scroll-y
  >
    <PageSkeleton v-if="isLoading" /><!-- 21.7 -->
    <template v-else>
      <XtxSwiper :list="bannerList" /><!-- 9.4同步 + 10.6同步 -->
      <CategoryPanel :list="categoryList" /><!-- 11.end同步 + 12.6同步 -->
      <HotPanel :list="hotList" /><!-- 13.end同步 + 14.6同步 -->
      <XtxGuess ref="guessRef" /><!-- 15.end同步 + 18.3同步 -->
    </template>
  </scroll-view>
</template>

<style lang="scss">
/* 18.1 样式 */
page {
  background-color: #f7f7f7;
  height: 100%;
  overflow: hidden;
}

.viewport {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.scroll-view {
  flex: 1;
  overflow: hidden;
}
</style>
